<template>
  <div>
    <div class="u-title">
      <h3>
          <span class="f-ff2">
            <p class="fp-13">听歌排行</p>
          </span>

       <div class="nav">
          <span :class="actShow?'z-sel':''" @click="changeAct('all')">所有时间</span>
          <i></i>
          <span :class="!actShow?'z-sel':''" @click="changeAct('week')">最近一周</span>
        </div>
      </h3>
      <h4 v-if="allData.length>0 || weakData.length>0">累积听歌{{listenSongs}}首</h4>
      <span class="leiji"  v-if="allData.length>0 || weakData.length>0"><a href="javascript:;" class="u-icn2-5"></a>
      <div class="tip">
        <p>实际播放时间过短的歌曲将不纳入计算。</p>
        <i class="t"></i>
        <i class="b"></i>
      </div>
      </span>

    </div>
    <div class="m-record">
      <ul v-if="allData.length">
        <li v-for="(child,index) in allData.slice(0,10)" :key="index">
          <div class="head">
            <span class="icon-3" @click="sentSongUrl(child.song)"></span>
            <span class="num">{{ index + 1 }}.</span>
          </div>
          <div class="song">
            <div class="tt">
                <span class="txt">
                  <router-link :to="{name:'SongDetail',params: {id:child.song.id}}" class="tex-a">
                    <b :title="child.song.name">{{ child.song.name }}</b>
                  </router-link>
                  <span class="s-fc8">
                    <em>-</em>
                    <span :title="child.song.ar.name" v-if="child.song.ar">
                      <router-link :to="{name:'Work',params:{id:child.song.ar[0].id}}">{{ child.song.ar[0].name }}</router-link>
                    </span>
                  </span>
                </span>
            </div>
            <div class="oper">
              <a href="javascript:;" title="添加到播放列表" @click.prevent="addSongList(child.song)"></a>
              <span class=" s-bg-11" title="收藏">收藏</span>
              <span class=" u-icn-81" title="分享">分享</span>
              <span class=" s-bg-12" title="下载">下载</span>
            </div>
          </div>
          <div class="tops">
            <span class="bg" :style='`width: ${child.score}%;`'></span>
          </div>
        </li>
        <div class="more">
          <router-link :to="{name:'View',params:{type:this.$route.params.type,id:this.$route.params.id}}" v-if="allData.length>10">查看更多></router-link>
        </div>
      </ul>
      <div class="j-flag" v-else>
        <div class="n-nmusic">
          <h3 class="f-ff4">
            <i class="u-icon"></i>
            暂无听歌记录
          </h3>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  name: "index",
  props:['listenSongs'],
  methods: {
    addSongList(i){
      this.$store.commit('track/ADDMUSICLIST',i)
    },
    sentSongUrl(i){
      this.$store.commit('track/SETMUSIC',i)
    },
    changeAct(str) {

      if (str === 'week') {
        this.$store.dispatch('userDetail/change', str)
        this.$router.push({name: 'UserDetailView', params: {id: this.$route.params.id, type: 1}}).catch(err => {
          console.log(err)
        })
      } else if (str === 'all') {
        this.$store.dispatch('userDetail/change', str)
        this.$router.push({name: 'UserDetailView', params: {id: this.$route.params.id, type: 0}}).catch(err => {
          console.log(err)
        })
      }
    },
    getUserRecord() {
      this.$API.reqUserRecord(this.$route.params.id, this.$route.params.type).then((res) => {
        // this.allData = res.data.allData || res.data.weakData
        if (res.data.allData) {
          this.allData = res.data.allData
        } else if (res.data.weekData) {
          this.allData = res.data.weekData

        }
      }, (reject) => {
        console.log(reject)
      }).catch(err => {
        console.log(err)
      })
      // this.allData = result.data.allData
    },
  },
  data() {
    return {
      allData: [],
      weakData: [],
      actShow: true,
      show: true
    }
  },
  mounted() {
    this.getUserRecord()
    if (this.$route.params.type == 0) {
      this.actShow = true
    } else {
      this.actShow = false
    }
  }
}
</script>

<style scoped lang="less">
.m-record {
  padding-bottom: 60px;
}

.u-title {
  width: 900px;
  height: 33px;
  margin: 0 auto;
  position: relative;
  border-bottom: 2px solid #c20c0c;
  h4{
    float: left;
    display: inline;
    margin-top: 5px;
    line-height: 26px;
    font-weight: 400;
    font-size: 12px;
    color: #666;
  }
  .leiji{
    position: relative;
    margin-left: 10px;
    left: -1px;
    top: 8px;
    line-height: 18px;
    z-index: 2;
    &:hover .tip{
      display: block;
    }
    a{
      width: 18px;
      height: 18px;
      overflow: hidden;
      vertical-align: middle;
      display: inline-block;
      background-position: 0 -50px;
      background-image: url("../../../assets/icon2.png");

    }
  }
  .tip{
    position: absolute;
    left: -33px;
    top: 30px;
    display: none;
    width: 295px;
    font-size: 12px;
    line-height: 20px;
    padding: 8px 13px 7px 19px;
    z-index: 2;
    color: #666;
    background-image: url("../../../assets/top_m.png");
    p{

    }
    .t{
      position: absolute;
      width: 327px;
      height: 16px;
      left: 0;
      top: -16px;
      background-image: url("../../../assets/top_t.png");
    }
    .b{
      position: absolute;
      width: 327px;
      height: 12px;
      left: 0;
      bottom: -12px;
      background-image: url("../../../assets/top_b.png");

    }
  }

  h3 {
    line-height: 28px;
    float: left;
    font-size: 20px;
    font-weight: normal;

    .f-ff2 {

      display: inline-block;
      font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;

      p {
        float: left;
      }

      .fp-13 {
        position: relative;
        margin-right: 10px;

        .f-pa {
          display: inline-block;
          width: 8px;
          height: 8px;
          top: 0px;
          right: -6px;
          position: absolute;
          background-size: cover;
          background-image: url(../../../assets/black-r-icon@3x.png);

        }
      }
    }

    .nav {
      position: absolute;
      z-index: 1;
      right: 0;
      bottom: 5px;

      span {
        line-height: 26px;
        color: #666;
        font-size: 12px;
        cursor: pointer;
        float: right;
        margin-left: 8px;
      }

      i {
        width: 1px;
        height: 12px;
        margin-top: 7px;
        background-color: #999;
        float: right;
        margin-left: 8px;
        font-style: normal;
        text-align: left;
        font-size: inherit;
      }

      .z-sel {
        color: #333;
        font-weight: 700;
      }
    }
  }
}

ul {
  width: 900px;
  margin: 0 auto;
  border: 1px solid #e2e2e2;
  border-top: none;

  li {
    //position: relative;
    width: 100%;
    height: 38px;
    line-height: 38px;
    overflow: hidden;

    &:nth-child(even) {
      background-color: #F7F7F7;
    }

    &:hover {
      background-color: #E6E6E6;
    }

    &:hover .txt {
      width: 80%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    &:hover .oper {
      display: block !important;
    }

    &:hover .u-dur {
      display: none;
    }

    .head {
      float: left;
      width: 72px;
      height: 38px;
      overflow: hidden;

      .icon-3 {
        float: right;
        display: inline;
        margin-top: 10px;
        width: 17px;
        height: 17px;
        cursor: pointer;
        background-position: 0 -103px;
        background-image: url("../../../assets/table.png");
        &:hover{
          background-position: -0px -128px;
          cursor: pointer;
        }
      }

      .num {
        float: left;
        display: inline;
        padding-left: 5px;
        padding-right: 8px;
        width: 37px;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        color: #666;

      }
    }

    .song {
      float: left;
      position: relative;
      z-index: 1;
      zoom: 1;

      padding-left: 10px;
      width: 490px;
      height: 38px;
      overflow: hidden;

      .tt {
        float: left;
        width: 100%;

        .txt {
          position: relative;
          display: inline-block;
          max-width: 99%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          .tex-a {
            b {
              color: #000;
              font-weight: bold;
            }
          }

          .s-fc8 {
            color: #aeaeae;

            em {
              margin: 0 5px
            }

            span {
              color: #aeaeae;

              a {
                color: #aeaeae;
              }
            }
          }
        }
      }

    }

    .tops {

      float: right;
      position: relative;
      z-index: 1;
      zoom: 1;
      width: 319px;
      height: 38px;
      line-height: 38px;

      .bg {
        position: absolute;
        z-index: 1;

        height: 38px;
        background-color: #4eb4f5;
        opacity: 0.1;
      }
    }

    .oper {
      position: absolute;
      z-index: 1;
      right: 0;
      top: 11px;
      display: none;
      width: 92px;
      height: 20px;
      overflow: hidden;

      a {
        width: 13px;
        height: 13px;
        float: left;
        margin-top: 2px;
        display: inline-block;

        background: url("../../../assets/icon.png") no-repeat 0 -700px;
        &:hover{
          background-position: -22px -700px;
        }
      }

      .s-bg-11 {
        float: left;
        width: 18px;
        height: 16px;
        margin: 2px 0 0 4px;
        overflow: hidden;
        text-indent: -999px;
        cursor: pointer;
        background: url("../../../assets/table.png") no-repeat 0 -174px;
        &:hover{
          background-position: -20px -174px;
        }
      }

      .u-icn-81 {
        float: left;
        width: 18px;
        height: 16px;
        margin: 2px 0 0 4px;
        overflow: hidden;
        text-indent: -999px;
        cursor: pointer;
        background: url("../../../assets/table.png") no-repeat 0 -195px;
        &:hover{
          background-position: -20px -195px;
        }
      }

      .s-bg-12 {
        float: left;
        width: 18px;
        height: 16px;
        margin: 2px 0 0 4px;
        overflow: hidden;
        text-indent: -999px;
        cursor: pointer;
        background: url("../../../assets/table.png") no-repeat -81px -174px;
        &:hover{
          background-position: -104px -174px;
        }
      }
    }
  }
}

.j-flag {
  width: 900px;
  height: 298px;
  margin: 0 auto;

  .n-nmusic {
    padding: 105px 0 105px 0;
    text-align: center;

    .f-ff4 {
      padding-bottom: 38px;
      font-size: 18px;
      font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;

      .u-icon {
        margin-right: 17px;
        width: 64px;
        height: 50px;
        background-position: 0 -347px;
        display: inline-block;
        overflow: hidden;
        vertical-align: middle;
        background-image: url("../../../assets/icon.png");
      }
    }
  }
}

.more {
  height: 32px;
  width: 900px;
  line-height: 32px;
  text-align: right;
  margin: 0 auto;

  a {
    color: #666;
    margin-right: 10px;
  }
}
</style>